<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="./upload02.do" method="get">
    用户名：<input type="text" name="username"/><br/>
    密码：<input type="password" name="password"/><br/>
    自我介绍：<textarea name="introduction"></textarea><br/>
    <!--  绑定文件上传方法 当文件选择成功后 即可上传到服务器  -->
    头像:<input type="file" onchange="upFile()" id="file" name="file">
    <!--  用隐藏域接收服务器回传的图片真实名称  -->
    <input type="hidden" name="filename">
    <img src="" id="img"/>
    <button type="submit">提交</button>
</form>
<!--导入 jQuery-->
<script type="text/javascript" src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
    function upFile() {
        var file = $('#file')[0].files[0];
        //必须要使用 FormData 表达上传数据
        var myForm = new FormData();
        myForm.append('file', file);
        $.ajax({
            type: 'POST',
            url: './upload02.do',
            data: myForm,
            processData: false,//禁止类型转换//必须false才会避开jQuery对 formdata 的默认处理
            contentType: false,//必须false才会自动加上正确的Content-Type
            dataType: 'text',
            success: function (data) {
                //data:服务器返回的真实文件名
                console.log(data);
                //文件名回传到 type=hidden 的 input
                $('input[name="filename"]').val(data);
                //把 img src 回填
                $('#img').attr('src', '/demo0221/imgUpload/' + data);
            }, error: function (err) {
                console.log('err = ' + err);
            }
        });
    }
</script>
</body>
</html>